<template>
	<view class="container">
		<uni-nav-bar class="ch-nav navborder" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">专家</text>
			<template slot="right">
				<image class="right" src="@/public/images/public/dhl_ss.png" mode="aspectFit" @tap="$goByName('expertsearch')"></image>
			</template>
		</uni-nav-bar>
		<scroll-view
			class="scroll-Y" 
			:scroll-y="true"
			:scroll-top="scrollTop"
			:refresher-enabled="true" 
			:refresher-triggered="refreshing"
			refresher-default-style="none"
			refresher-background="rgba(255, 255, 255, 0)"
			@refresherrefresh="refresh"
			@scrolltolower="reachBottom"
			@scroll="scroll"
		>
		<view class="body flex-r" id="top">
			<view class="tab-list">
				<view class="list-item flex-r" v-for="(item, index) in tabList" :key="index" :class="{'active': tabCur == index}" @tap="leftChange(index)">
					<view class="list-item-block" :class="{'active': tabCur == index}"></view>
					<text class="list-item-name">{{item.name}}</text>
				</view>
			</view>
			<view class="tab-body">
				<template v-for="(item, index) in tabList">
					<keep-alive>
						<ExpertList v-if="tabCur == index" :list="recLists[tabCur]" :type="item.value" :isEnd="tabData[tabCur].isEnd" :key="index">
							<EmptyContent top="200rpx" text="暂无内容" img="qsy_zwxl" @refresh="getRecLists"></EmptyContent>
						</ExpertList>
					</keep-alive>
				</template>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [
					{name: "关注专家", value: "follow"},
					{name: "连红专家", value: "continuousRed"},
					{name: "周人气榜", value: "popularity"},
					{name: "公推连红榜", value: "publicRed"},
					{name: "全部专家", value: "all"}
				],
				tabCur: 0,
				tabData: [
					{pageNo: 1,	isEnd: false},
					{pageNo: 1,	isEnd: false},
					{pageNo: 1,	isEnd: false},
					{pageNo: 1,	isEnd: false},
					{pageNo: 1, isEnd: false}
				],
				recLists: [],
				
				navBorder: false,
				refreshing: false,
				scrollTop: 0
			}
		},
		components: {
			ExpertList: () => import('./components/ch-expert/ch-newexpertlist')
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			noFollow() {
				return this.$store.state.expertNoFollow
			},
			isFollow() {
				return this.$store.state.expertFollow
			}
		},
		watch: {
			noFollow(newValue, oldValue) {
				this.updateFavExpert()
			},
			isFollow(newValue, oldValue) {
				this.updateFavExpert()
			}
		},
		onLoad() {
			//查询服务端配置的tab
			this.getTabList(this.$Route.query.navTab)
		},
		methods: {
			//获取tablist
			getTabList(navTabValue) {
				this.$http.get({
					url: '/api/dict/info',
					data: {
						code: 'redRank'
					}
				}).then((data) => {
					console.log('config', data);
					if(data.success && data.result){
						this.tabList = data.result
						this.tabData = Array.from({length: data.result.length}, item => item = {pageNo: 1, isEnd: false})
						if(navTabValue){
							this.tabCur = this.tabList.findIndex((item) => item.value == navTabValue)
						}
						this.getRecLists()
					}else{
						uni.showToast({
							title: data.message || '数据错误，请稍后重试',
							icon: 'none'
						})
					}
				}).catch((error) => {
					console.log(error);
				})
			},
			//屏幕滑动
			scroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			//上滑加载
			reachBottom() {
				if(this.tabCur != 1){
					if(!this.tabData[this.tabCur].isEnd){
						this.getRecLists()
					}
				}
			},
			//下拉刷新
			refresh() {
				this.refreshing = true
				this.getTabList()
				setTimeout(() => {
					this.refreshing = false
				}, 1000)
			},
			//切换tab
			leftChange(index){
				if(!this.$store.state.isLogin&&index==0){
					this.$CHS.goUserLogin()
					return
				}
				this.tabCur = index
				if(!this.recLists[index]){
					this.tabData[index].pageNo = 1
					this.getRecLists();
				}
				this.scrollTop = this.oldScrollTop
				this.$nextTick(()=>{
					this.scrollTop = 0
				})
				this.$Route.meta.routeName = this.tabList[index].name
			},
			//监听更新关注的专家
			updateFavExpert() {
				this.tabData[0].pageNo = 1
				this.getFavExperts(0)
			},
			//获取列表数据
			getRecLists(){
				let tabValue = this.tabList[this.tabCur].value
				if(tabValue == 'follow'){
					this.getFavExperts(this.tabCur)
				}
				if(tabValue == 'continuousRed'){
					this.getContinuityExperts(this.tabCur)
				}
				if(tabValue == 'popularity'){
					this.getVarietyExperts(this.tabCur)
				}
				if(tabValue == 'publicRed'){
					this.getFreeContinuity(this.tabCur)
				}
				if(tabValue == 'all'){
					this.getAllExperts(this.tabCur)
				}
			},
			//新连红专家
			getContinuityExperts(tabCur){
				this.$http.get({
					url: '/api/appUser/queryExpertRedRankRows'
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.$set(this.recLists, tabCur, data.result)
						this.tabData[tabCur].isEnd = true
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//公推连红榜
			getFreeContinuity(tabCur){
				this.$http.get({
					url: '/api/appUser/queryExpertRedFree'
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.$set(this.recLists, tabCur, data.result)
						this.tabData[tabCur].isEnd = true
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//人气推荐
			getVarietyExperts(tabCur){
				this.$http.get({
					url: '/api/appUser/expert/softHits',
					data: {
						variety: 'softHits',
						pageNo: this.tabData[tabCur].pageNo,
						pageSize: 10
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.setRecListsData(data, tabCur)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//关注的专家
			getFavExperts(tabCur) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				this.$http.get({
					url: '/api/appUser/queryUserFollowExportRows',
					data: {
						type: 2,
						userId: this.user.userId,
						pageNo: this.tabData[tabCur].pageNo,
						pageSize: 10
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.setRecListsData(data, tabCur)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//优享卡专家
			getCardExperts(tabCur) {
				this.$http.get({
					url: '/api/appUser/expert/card',
					data: {
						variety: 'card',
						pageNo: this.tabData[tabCur].pageNo,
						pageSize: 10
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.setRecListsData(data, tabCur)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//全部专家
			getAllExperts(tabCur){
				this.$http.get({
					url: '/api/appUser/queryExpertInfoList',
					data: {
						pageNo: this.tabData[tabCur].pageNo,
						pageSize: 10
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.setRecListsData(data, tabCur)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//更新数据
			setRecListsData(data, navTab){
				if(data.result.total > 0){
					if(data.result.current == 1){
						this.$set(this.recLists, navTab, data.result.records)
					}else{
						this.recLists[navTab].push(...data.result.records)
					}
					this.tabData[navTab].isEnd = data.result.current >= data.result.pages
					this.tabData[navTab].pageNo = data.result.current + 1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.scroll-Y{
			height: calc(var(--safe-height) - #{$navbar-height});
		}
	}
	.body{
		.tab-list{
			position: fixed;
			width: 160rpx;
			.list-item{
				width: 160rpx;
				height: 88rpx;
				background: #F2F5FA;
				align-items: center;
				justify-content: flex-start;
				&.active{
					background: #FFFFFF;
				}
				.list-item-block{
					width: 8rpx;
					height: 32rpx;
					&.active{
						background: #0055FF;
					}
				}
				.list-item-name{
					margin-left: 12rpx;
					font-size: 26rpx;
					line-height: 32rpx;
					max-width: 140rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
				}
			}
		}
		.tab-body{
			margin-left: 160rpx;
		}
	}
</style>
